<template>
	<view class="goods-box">
		<view class="shop-info">
			<view class="shop" v-if="isShopName">
				<image src="/static/icon/productDetails/store.png" class="s-img"/>
				<view class="shop-name"> {{goodsInfo.shop_name}} </view>
				<Tag :bgc="goodsInfo.type==1?'#FF9B05':'#FF3B1E'" :text="goodsInfo.type==1?'个人':'商家'"/>
			</view>
			<view class="order-status" v-if="isOrderStatus"> 订单状态 </view>
			<view class="collect" v-if="isCollect"> 
				<image src="/static/icon/mine/collect.png" @tap="emit('cancelCollect', goodsInfo.spu)" class="c-img"/> 
			</view>
		</view>
		<view class="goods-items" @tap="goDetails">
			<image :src="goodsInfo.img" class="goods-img"/>
			<view class="content">
				<view class="goods-info">
					<view class="goods-name" :style="{width: w}"> {{goodsInfo.name}} </view>
					<view class="spec">规格：{{goodsInfo.item_name}}</view>
					<view class="price"> ￥<text>{{goodsInfo.price=='0.00'?'面议':goodsInfo.price}}</text> </view>
				</view>
				<view class="num"> x1 </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed } from 'vue'
	import Tag from '@/components/Tag.vue'
	const emit = defineEmits(['cancelCollect'])
	const props = defineProps({
		isOrderStatus: {
			type: Boolean,
			default: false
		},
		isCollect: {
			type: Boolean,
			default: false
		},
		isShopName: {
			type: Boolean,
			default: true
		},
		goodsInfo: {}
	})
	const { safeArea } = uni.getSystemInfoSync()
	const w = computed(() => (safeArea.width - 158) + 'px' )
  const goDetails = () => {
    uni.navigateTo({
    	url: `/pages/productDetails/productDetails?spu=${props.goodsInfo.spu}`
    })
  }
</script>

<style lang="scss" scoped>
	.shop-info {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.shop {
			display: flex;
			align-items: center;
			.s-img {
				width: 18px;
				height: 18px;
			}
			.shop-name {
				margin: 0 6px;
				color: #666666;
				font-size: 14px;
				font-weight: 400;
			}
		}
		.order-status {
			font-weight: 400;
			font-size: 14px;
			color: #FF3B1E;
		}
		.collect {
			.c-img {
				width: 20px;
				height: 20px;
			}
		}
	}
	.goods-items {
		display: flex;
		margin-bottom: 10px;
		.goods-img {
			width: 80px;
			height: 80px;
			margin-right: 10px;
			border-radius: 10px;
		}
		.content {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: end;
			.goods-info {
				.goods-name {
					color: #333333;
					font-size: 16px;
					font-weight: 500;
					line-height: 24px;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					
				}
				.spec {
					color: #999999;
					font-size: 12px;
					margin-top: 3px;
					font-weight: 400;
					line-height: 16px;
				}
				.price {
					color: #FF3B1E;
					font-size: 10px;
					margin-top: 15px;
					font-weight: bold;
					line-height: 20px;
					text {
						font-size: 15px;
					}
				}
			}
			.num {
				color: #999999;
				font-size: 12px;
				font-weight: 400;
			}
		}
	}
</style>